<template>
  <div class="about">
    <el-link @click="$router.push('/')" :underline="false" type="primary">返回地址列表</el-link>
    <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="收货人:">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机:">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="所在地区:">
          <el-input v-model="form.di"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="form.zhi"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add()">保存收货地址</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'; 
export default {
  data() {
    return {
        form: {
          name: '',
          tel: '',
          di: '',
          zhi: ''
        },

    };
  },
  computed:{
    ...mapState(['message'])
  },
  mounted() {
    
  },

  methods: {
    ...mapMutations(['addobj']),
    add(){
      if(this.form.name==""||this.form.tel==""||this.form.di==""||this.form.zhi==""){
        return alert('不能为空')
      }
      //组合添加
      var obj={name:this.form.name,tel:this.form.tel,di:this.form.di,zhi:this.form.zhi,flag:false}
      //执行添加
      this.addobj(obj)
      //清空
      this.form.name=this.form.tel=this.form.di=this.form.zhi=""
    }
  },
};
</script>
<style lang="scss" scoped>
.about{
  border: 1px solid #f1a56f;
  width: 800px;
  height: 350px;
  margin-left: 200px;
  margin-top: 50px;
}
.el-link{
  padding: 10px 5px;
}
</style>